<template>
<div>
    <div>
        <label>编号：</label>
        <Input v-model="page.action_data.number" style="width:200px"></Input>
        <label>标题：</label>
        <Input v-model="page.action_data.title" style="width:200px"></Input>
        <Button type="primary" icon="ios-search" @click="search" >搜索</Button>
    </div>
    <AutoTable :columns="columns" :data="serviceList" :page="page"></AutoTable>
    <Modal
        v-model="detail" title="服务详情" :width="1000" ok-text="申请" @on-ok="getService">
        <Card style="width:100%">
            <Row>
                <Col span = "4" style="text-align:right"><p style="font-weight:bold">服务名称：</p></Col>
                <Col span = "16"><a :href="'/#/index/specialservice_detail/'+plateform_service.id">{{plateform_service.title}}</a></Col>
            </Row>
            <Row>
                <Col span = "4" style="text-align:right"><p style="font-weight:bold">服务简介：</p></Col>
                <Col span = "16"><p>{{plateform_service.content}}</p></Col>
            </Row>
        </Card>
        <Card style="width:100%">
            <Row class = "service_detail">
                <StepsEditor source-type="abutment" :source="plateform_service" mode="preview_default"></StepsEditor>
            </Row>
        </Card>
    </Modal>
</div>
</template>

<script>
import util from "../../libs/util";
import PlateformService from "@/common/model/PlateformService"
import Vue from 'vue';
import iviewArea from 'iview-area';
import Page from "@/common/model/Page";
import AutoTable from "@/common/components/AutoTable";
import UploadedList from "@/common/components/UploadedList";
import StepsEditor from "@/common/components/StepsEditor"
    export default 
    {
        data() {
            return {
                page:new Page("search/plateform_service",{}),
                detail:false,
                service_detail:"",
                service_title:"",
                plateform_service: new PlateformService(),
                columns:[
                    {
                        title:"序号",
                        align:"center",
                        width:65,
                        render: (h,params) => {
                            return h('div',(this.page.current_page -1) * this.page.page_size + params.index + 1);
                        } 
                    },
                    {
                        title: '编号', render:(h, params) => {
                            return h('div', params.row.number);
                        }
                    },
                    {
                        title:"服务名称",
                        align:"left",
                        key:"title",
                    },
                    {
                        title:"服务简介",
                        align:"left",
                        key:"content",
                        render:(h,params) => {
                            return h('div',params.row.content.length>100?params.row.content.substring(0,100):params.row.content);
                    }
                    },
                    {
                        title:"发布时间",
                        align:"center",
                        key:"formated_create_time",
                        width:150,
                        render: (h, params) => { 
                        return h('strong', params.row.formated_create_time); 
                    }
                    },
                    {
                        title:"操作",
                        align:"center",
                        key:"action",
                        width:200,
                        render:(h,params) => {
                            return h('div',[
                                h('Button',{
                                    props : { type:'success',size:'small' },
                                    style : { marginRight: '5px' },
                                    on: { click:() => { this.handleCheckDetial(params) } },
                                },'查看详情'),
                                h('Button',{
                                    props : { type:'primary',size:'small' },
                                    style : { marginRight: '5px' },
                                    on: { click:() => { this.handleCheckDetial(params) } },
                                },'申请服务'),
                            ]);
                        }
                    }
                ]
            }
        },
        components: {
            AutoTable,UploadedList,StepsEditor
        },
        computed:{
            serviceList(){
                return PlateformService.parseList(this.page.list);
            },
        },
        methods: {
            search(){
                this.page.current_page = 1;
                this.page.getData();       
            },
            handleCheckDetial(params) {
                this.detail = true;
                this.plateform_service = params.row;
            },
            getService() {
                if(confirm("是否确定申请服务？申请成功后可在已申请服务列表查看")) {
                    this.api.post("plateformabutment/post",{plateformservice_id:this.plateform_service.id},res=>{
                        this.$router.push({ name: "applied_plateformservice", query: { id: res.id } });
                    });
                }
            },
        }
    }
</script>
<style scoped>
.service_detail
{
    margin: 2% 10% 2%;
    font-size: 15px;
}
</style>
